@import './comm.scss';

.home-box {
  .banner {
    width: 100%;
    height: pxTorem(500);
    background: url(http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/index/banner/banner.png)
      no-repeat left top;
    background-size: 100%;
    margin-bottom: pxTorem(30);
    position: relative;
    .banner-cube {
      position: absolute;
      left: pxTorem(270);
      top: pxTorem(110);
      z-index: 8;
      width: pxTorem(544);
      height: pxTorem(403);
      background: url(http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/index/banner/cube.png)
        no-repeat left top;
      background-size: 100%;
    }
    .banner-info {
      position: absolute;
      left: pxTorem(759);
      top: pxTorem(152);
      z-index: 9;
      width: pxTorem(700);
      .title {
        width: pxTorem(688);
        height: pxTorem(36);
        background: url(http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/index/banner/title.png)
          no-repeat left top;
        background-size: 100%;
      }
      .sub-title {
        margin-top: pxTorem(53);
        width: pxTorem(360);
        height: pxTorem(50);
        line-height: pxTorem(50);
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 11px 29px 0px rgba(0, 18, 126, 0.15);
        border-radius: 4px;
        span {
          display: inline-block;
          vertical-align: top;
          font-size: pxTorem(30);
          font-weight: 400;
          color: rgba(0, 0, 0, 1);
          height: pxTorem(50);
          line-height: pxTorem(50);
          padding-left: pxTorem(23);
          padding-right: pxTorem(30);
          position: relative;
          &::after {
            position: absolute;
            right: 0;
            top: pxTorem(24);
            z-index: 9;
            content: '';
            width: pxTorem(8);
            height: pxTorem(2);
            background: $primary;
          }
        }
        .sub-3 {
          &::after {
            display: none;
          }
        }
      }
      .btn-box {
        margin-top: pxTorem(50);
        padding-left: pxTorem(9);
      }
    }
  }

  .four-card {
    width: 100%;
    height: auto;
    text-align: center;
    .card {
      display: inline-block;
      vertical-align: top;
      width: pxTorem(384);
      height: pxTorem(190);
      margin-right: pxTorem(19);
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 11px 32px 0px rgba(0, 18, 126, 0.1);
      border-radius: pxTorem(10);
      background: url('http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/index/four-card.png')
        no-repeat left top;
      background-size: 100%;
      text-align: center;
      &:last-child {
        margin-right: 0;
      }
      p {
        margin: 0;
        padding: 0;
      }

      span {
        font-size: pxTorem(24);
        line-height: pxTorem(24);
        font-family: 'PingFang SC';
        font-weight: 500;
        color: #737988;
      }
      .title {
        margin-top: pxTorem(58);
        margin-bottom: pxTorem(27);
        vertical-align: top;
        display: inline-block;
        height: pxTorem(28);
      }
    }
    .card1 {
      .title {
        width: pxTorem(88);
        background: url('http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/index/card1.jpg')
          no-repeat left top;
        background-size: 100%;
      }
    }
    .card2 {
      .title {
        width: pxTorem(110);
        background: url('http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/index/card2.jpg')
          no-repeat left top;
        background-size: 100%;
      }
    }
    .card3 {
      .title {
        width: pxTorem(176);
        background: url('http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/index/card3.jpg')
          no-repeat left top;
        background-size: 100%;
      }
    }
    .card4 {
      .title {
        width: pxTorem(78);
        background: url('http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/index/card4.jpg')
          no-repeat left top;
        background-size: 100%;
      }
    }
  }

  .qbmf-card,
  .qbmf-product {
    margin-top: pxTorem(159);
    text-align: center;
    h3 {
      font-size: pxTorem(30);
      font-weight: 600;
      color: rgba(0, 0, 0, 1);
    }
  }

  .qbmf-card {
    .three-card {
      padding-top: pxTorem(109);
      .card {
        position: relative;
        display: inline-block;
        vertical-align: top;
        height: pxTorem(549);
        width: pxTorem(384);
        padding-top: pxTorem(264);
        box-sizing: border-box;
        margin-right: pxTorem(75);
        box-shadow: 0px 4px 16px 0px rgba(23, 64, 197, 0.13);
        border-radius: pxTorem(10);
        &:last-child {
          margin-right: 0;
        }

        .title {
          margin-top: pxTorem(-20);
          span {
            padding: pxTorem(12) pxTorem(30) pxTorem(18) pxTorem(31);
            background: #fff;
            font-size: pxTorem(30);
            font-weight: 600;
            color: #000;
            border-radius: pxTorem(59);
          }
        }
        .content {
          width: pxTorem(317);
          margin: pxTorem(19) auto 0;
          font-size: pxTorem(18);
          font-weight: 400;
          line-height: pxTorem(28);
          color: #333;
        }
        .btn {
          position: absolute;
          left: 50%;
          bottom: pxTorem(35);
          z-index: 9;
          margin-left: pxTorem(-70);
        }
      }
      .card1 {
        background: url('http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/index/qbmf1.png')
          no-repeat left top;
        background-size: 100%;
      }
      .card2 {
        background: url('http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/index/qbmf2.png')
          no-repeat left top;
        background-size: 100%;
      }
      .card3 {
        background: url('http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/index/qbmf3.png')
          no-repeat left top;
        background-size: 100%;
      }
    }
  }

  .qbmf-product {
    .qbmf-container {
      width: 1200px;
      margin: 0 auto;
      .row {
        margin-top: pxTorem(142);
      }
      .right-info {
        .info {
          padding-left: 90px;
        }
      }
      .info {
        text-align: left;
        h3 {
          line-height: pxTorem(24);
          font-size: pxTorem(24);
          font-family: 'PingFang SC';
          font-weight: 600;
          color: #000;
        }
        .sub-title {
          font-size: pxTorem(14);
          font-family: 'PingFang SC';
          font-weight: 400;
          color: #999;
        }
        .content {
          width: 506px;
          padding-top: pxTorem(48);
          color: #737988;
          font-size: pxTorem(18);
          font-family: 'PingFang SC';
          font-weight: 400;
          line-height: 27px;
        }
        .btn-group {
          padding-top: pxTorem(72);
          .mr56 {
            margin-right: pxTorem(56);
          }
        }
      }

      .h396 {
        height: pxTorem(396);
        border-radius: 8px;
        background: url('http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/index/saas-r.png')
          no-repeat left top;
        background-size: 100% 100%;
        box-shadow: 0px 4px 16px 0px rgba(23, 64, 197, 0.13);
      }

      .ds .h396 {
        background: url('http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/index/ds-l.png')
          no-repeat left top;
        background-size: 100% 100%;
      }
      .county .h396 {
        background: url('http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/index/county-r.png')
          no-repeat left top;
        background-size: 100% 100%;
      }
      .apply .h396 {
        background: url('http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/index/apply.png')
          no-repeat left top;
        background-size: 100% 100%;
        box-shadow: none;
      }

      .apply {
        padding-bottom: pxTorem(232);
        h3 {
          text-align: left;
          font-size: pxTorem(30);
          line-height: pxTorem(100);
          font-family: 'PingFang SC';
          font-weight: 600;
          color: rgba(0, 0, 0, 1);
        }
        .form-horizontal {
          padding-top: pxTorem(50);
        }
        .form-group {
          .control-label {
            padding-right: 0;
            font-size: pxTorem(18);
            font-family: 'PingFang SC';
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
          }
          .form-control {
            width: pxTorem(323);
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(29, 92, 251, 1);
            border-radius: 4px;
            color: #000;
          }
          .btn-group {
            text-align: left;
          }
        }
      }
    }
  }
  .coo {
    background: rgba(246, 247, 250, 1);
    padding-top: pxTorem(99);
    padding-bottom: pxTorem(31);
    h3 {
      text-align: center;
      font-size: pxTorem(30);
      font-family: 'PingFang SC';
      font-weight: 600;
      color: rgba(0, 0, 0, 1);
    }
    .coo-card {
      margin: 0;
      padding: 0;
      width: pxTorem(1205);
      margin: 0 auto;
      margin-top: pxTorem(54);
      background: url(http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/comm/demo-bg.png)
        no-repeat left center;
      background-size: 100%;
      li {
        float: left;
        margin-right: pxTorem(50);
        margin-bottom: pxTorem(54);
        width: pxTorem(262);
        height: pxTorem(161);
        line-height: pxTorem(161);
        text-align: center;
        background: #fff;
        img {
          display: inline-block;
          vertical-align: middle;
        }
      }
      .nomr {
        margin-right: 0;
      }
    }
  }

  .dash {
    padding-top: pxTorem(159);
    text-align: center;
    h3 {
      margin: 0;
      padding: 0;
      font-size: pxTorem(30);
      font-family: 'PingFang SC';
      font-weight: 600;
      color: rgba(0, 0, 0, 1);
      position: relative;
      .more-info {
        position: absolute;
        right: pxTorem(308);
        bottom: 0;
        z-index: 9;
        height: pxTorem(18);
        font-size: pxTorem(18);
        font-weight: 600;
        padding-right: pxTorem(30);
        color: #1d5cfb;
        background: url(http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/comm/right.png)
          no-repeat right center;
      }
    }
    .dash-card {
      padding-top: pxTorem(83);
      .item {
        display: inline-block;
        width: pxTorem(381);
        margin-right: pxTorem(77);
        &:last-child {
          margin-right: 0;
        }
        dt {
          a {
            display: block;
            height: pxTorem(264);
            img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }
        }
        dd {
          box-shadow: 0px 4px 16px 0px rgba(23, 64, 197, 0.13);
          border-radius: 0px 0px 10px 10px;
          background: rgba(255, 255, 255, 1);
          a {
            display: block;
            height: pxTorem(83);
            line-height: pxTorem(83);
            color: #333;
            text-decoration: none;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            &:hover {
              text-decoration: underline;
              color: $primary;
            }
          }
        }
      }
    }
  }
  // apply
  .apply-box {
    width: pxTorem(1286);
    margin: 0 auto;
    .apply-img {
      float: left;
      width: pxTorem(700);
      .title {
        width: pxTorem(696);
        height: pxTorem(72);
        background: url(http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/apply/title.jpg)
          no-repeat left top;
        background-size: 100%;
        margin-top: pxTorem(85);
        margin-bottom: pxTorem(64);
      }
      .h396 {
        width: pxTorem(612);
        height: pxTorem(521);
        margin: 0 auto;
        border-radius: 8px;
        box-shadow: 0px 4px 16px 0px rgba(23, 64, 197, 0.13);
        background: url('http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/index/apply.png')
          no-repeat left top;
        background-size: 100%;
        box-shadow: none;
      }
    }

    .apply-form {
      float: right;
      width: pxTorem(510);
      h3 {
        width: pxTorem(506);
        margin: 0 auto;
        text-align: center;
        font-size: pxTorem(30);
        font-family: 'PingFang SC';
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
        margin-bottom: pxTorem(24);
        margin-top: pxTorem(57);
      }
      .form-horizontal {
        width: pxTorem(506);
        margin: 0 auto;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 12px 21px 0px rgba(23, 64, 197, 0.2);
        border-radius: 10px;
        padding-top: pxTorem(31);
        padding-bottom: pxTorem(42);

        .form-group {
          margin: 0;
          margin-bottom: pxTorem(22);
          width: 100%;
          .control-label {
            box-sizing: border-box;
            padding-right: 0;
            font-size: pxTorem(18);
            font-family: 'PingFang SC';
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
          }
          .form-control {
            width: pxTorem(323);
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(29, 92, 251, 1);
            border-radius: 4px;
            color: #000;
          }
          .btn-group {
            margin-top: pxTorem(47);
            text-align: left;
          }
          .help-block {
            margin-bottom: 0;
          }
          .select-png {
            position: relative;
            .select-po {
              position: absolute;
              left: pxTorem(323-18);
              top: 10px;
              z-index: 9;
              width: pxTorem(29);
              height: pxTorem(31);
              background: url(http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/comm/select-po.png)
                no-repeat left top;
              background-size: 100%;
            }
          }
        }
      }
    }
  }
}
